<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>管理系统</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../src/css/bootstrap.min.css">
    <!-- Typography CSS -->
    <link rel="stylesheet" href="../src/css/typography.css">
    <!-- Style CSS -->
    <link rel="stylesheet" href="../src/css/style.css">
    <!-- Responsive CSS -->
    <link rel="stylesheet" href="../src/css/responsive.css">
</head>
<body>
<!-- loader Start -->
<div id="loading">

</div>
<!-- loader END -->
<!-- Wrapper Start -->
<div class="wrapper">
    <!-- Sidebar  -->
    <div class="iq-sidebar">
        <div class="iq-sidebar-logo d-flex justify-content-between">
            <a href="index.html">
                <img src="../src/images/logo.gif" class="img-fluid" alt="">
                <span>DaLao</span>
            </a>
            <div class="iq-menu-bt align-self-center">
                <div class="wrapper-menu">
                    <div class="line-menu half start"></div>
                    <div class="line-menu"></div>
                    <div class="line-menu half end"></div>
                </div>
            </div>
        </div>
        <div id="sidebar-scrollbar">
            <div id="menu"></div>
            <div class="p-3"></div>
        </div>
    </div>
    <!-- TOP Nav Bar -->
    <div class="iq-top-navbar">
        <div class="iq-navbar-custom">
            <div class="iq-sidebar-logo">
                <div class="top-logo">
                    <a href="mailbox.html" class="logo">
                        <img src="../src/images/logo.gif" class="img-fluid" alt="">
                        <span>Dalao</span>
                    </a>
                </div>
            </div>
            <div class="navbar-breadcrumb">
                <h5 class="mb-0">邮箱</h5>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">主页</a></li>
                        <li class="breadcrumb-item active" aria-current="page">邮箱</li>
                    </ol>
                </nav>
            </div>
            <div id="navigation"></div>
        </div>
    </div>
    <!-- TOP Nav Bar END -->
    <!-- Page Content  -->
    <div id="content-page" class="content-page">
        <div class="container-fluid relative">
            <div class="row">
                <div class="col-lg-3">
                    <div class="iq-card">
                        <div class="iq-card-body">
                            <div class="">
                                <div class="iq-email-list">
                                    <button class="btn btn-primary btn-lg btn-block mb-3 font-size-16 p-3"
                                            data-target="#compose-email-popup" data-toggle="modal">
                                        <i class="ri-send-plane-line mr-2"></i>新邮件
                                    </button>
                                    <div class="iq-email-ui nav flex-column nav-pills">
                                        <ul style="margin-left: -30px; margin-right: 10px;">
                                            <li class="nav-link active" role="tab" data-toggle="pill"
                                                href="#mail-inbox">
                                                <a href="mailbox.html"><i class="ri-mail-line"></i>收件箱<span
                                                        class="badge badge-primary ml-2">4</span>
                                                </a>
                                            </li>
                                            <li class="nav-link" role="tab" data-toggle="pill" href="#mail-starred"><a
                                                    href="#"><i class="ri-star-line"></i>收藏</a></li>
                                            <li class="nav-link" role="tab" data-toggle="pill" href="#mail-snoozed"><a
                                                    href="#"><i class="ri-time-line"></i>定时</a></li>
                                            <li class="nav-link" role="tab" data-toggle="pill" href="#mail-draft"><a
                                                    href="#"><i class="ri-file-list-2-line"></i>草稿</a></li>
                                            <li class="nav-link" role="tab" data-toggle="pill" href="#mail-sent"><a
                                                    href="#"><i class="ri-mail-send-line"></i>已发送邮件</a></li>
                                            <li class="nav-link" role="tab" data-toggle="pill" href="#mail-trash"><a
                                                    href="#"><i class="ri-delete-bin-line"></i>垃圾箱</a></li>
                                            <li class="nav-link" role="tab" data-toggle="pill" href="#mail-important"><a
                                                    href="#"><i class="ri-bookmark-line"></i>重要的</a></li>
                                            <li class="nav-link" role="tab" data-toggle="pill" href="#mail-spam"><a
                                                    href="#"><i class="ri-spam-line"></i>垃圾邮件</a></li>
                                        </ul>
                                    </div>
                                    <h6 class="mt-4 mb-3">标签</h6>
                                    <ul class="iq-email-ui iq-email-label"
                                        style="margin-left: 27px;margin-right: 33px;">
                                        <li><a href="#"><i class="ri-focus-fill text-primary"></i>个人</a></li>
                                        <li><a href="#"><i class="ri-focus-fill text-danger"></i>单位</a></li>
                                        <li><a href="#"><i class="ri-focus-fill text-success"></i>重要的</a></li>
                                        <li><a href="#"><i class="ri-focus-fill text-info"></i>私人</a></li>
                                        <li><a href="#"><i class="ri-focus-fill text-warning"></i>私人</a></li>
                                        <li><a href="#"><i class="ri-add-circle-line"></i>添加新标签</a></li>
                                    </ul>
                                    <div class="iq-progress-bar-linear d-inline-block w-100">
                                        <h6 class="mt-4 mb-3">存储</h6>
                                        <div class="iq-progress-bar">
                                            <span class="bg-danger" data-percent="90"></span>
                                        </div>
                                        <span class="mt-1 d-inline-block w-100">7.02 GB (46%) of 15 GB 使用</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-9 mail-box-detail">
                    <div class="iq-card">
                        <div class="iq-card-body p-0">
                            <div class="">
                                <div class="iq-email-to-list p-3">
                                    <div class="d-flex justify-content-between">
                                        <ul>
                                            <li>
                                                <a href="#" id="navbarDropdown1" data-toggle="dropdown">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input"
                                                               id="customCheck1">
                                                        <label class="custom-control-label" for="customCheck1"><i
                                                                class="ri-arrow-down-s-line"></i></label>
                                                    </div>
                                                </a>
                                                <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
                                                    <a class="dropdown-item" href="#">已处理</a>
                                                    <a class="dropdown-item" href="#">未处理</a>
                                                </div>
                                            </li>
                                            <li data-toggle="tooltip" data-placement="top" title="重新加载"><a href="#"><i
                                                    class="ri-restart-line"></i></a></li>
                                            <li data-toggle="tooltip" data-placement="top" title="档案文件"><a
                                                    href="#"><i class="ri-mail-open-line"></i></a></li>
                                            <li data-toggle="tooltip" data-placement="top" title="垃圾邮件"><a href="#"><i
                                                    class="ri-information-line"></i></a></li>
                                            <li data-toggle="tooltip" data-placement="top" title="删除"><a href="#"><i
                                                    class="ri-delete-bin-line"></i></a></li>
                                            <li data-toggle="tooltip" data-placement="top" title="收件箱"><a href="#"><i
                                                    class="ri-mail-unread-line"></i></a></li>
                                            <li data-toggle="tooltip" data-placement="top" title="缩放"><a href="#"><i
                                                    class="ri-drag-move-2-line"></i></a></li>
                                        </ul>
                                        <div class="iq-email-search d-flex">
                                            <form class="mr-3 position-relative">
                                                <div class="form-group mb-0">
                                                    <label for="exampleInputEmail1"></label>
                                                    <input type="email" class="form-control" id="exampleInputEmail1"
                                                           style="margin-top: -24px;" aria-describedby="emailHelp"
                                                           placeholder="搜索">
                                                    <a class="search-link" href="#"><i class="ri-search-line"></i></a>
                                                </div>
                                            </form>
                                            <ul>
                                                <li class="mr-3">
                                                    <a class="font-size-14" href="#" id="navbarDropdown2"
                                                       data-toggle="dropdown">
                                                        第1-50页，共505页
                                                    </a>
                                                    <div class="dropdown-menu" aria-labelledby="navbarDropdown2">
                                                        <a class="dropdown-item" href="#">每页20张</a>
                                                        <a class="dropdown-item" href="#">每页50张</a>
                                                        <a class="dropdown-item" href="#">每页100张</a>
                                                    </div>
                                                </li>
                                                <li data-toggle="tooltip" data-placement="top" title="上一页">
                                                    <a href="#"><i class="ri-arrow-left-s-line"></i></a>
                                                </li>
                                                <li data-toggle="tooltip" data-placement="top" title="下一页">
                                                    <a href="#">
                                                        <i class="ri-arrow-right-s-line"></i>
                                                    </a>
                                                </li>
                                                <li class="mr-0" data-toggle="tooltip" data-placement="top"
                                                    title="设置">
                                                    <a href="#">
                                                        <i class="ri-list-settings-line"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="iq-email-listbox">
                                    <div class="tab-content">
                                        <div class="tab-pane fade show active" id="mail-inbox" role="tabpanel">
                                            <ul class="iq-email-sender-list">
                                                <li class="iq-unread">
                                                    <div class="d-flex align-self-center">
                                                        <div class="iq-email-sender-info">
                                                            <div class="iq-checkbox-mail">
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input"
                                                                           id="mailk">
                                                                    <label class="custom-control-label"
                                                                           for="mailk"></label>
                                                                </div>
                                                            </div>
                                                            <span class="ri-star-line iq-star-toggle text-warning"></span>
                                                            <a href="javascript: void(0);"
                                                               class="iq-email-title">乔普尔(我)</a>
                                                        </div>
                                                        <div class="iq-email-content">
                                                            <a href="javascript: void(0);" class="iq-email-subject">Mackenzie
                                                                尼科（@Mackenzieniko）已经发送
                                                                你在Twitter上直接留言！-
                                                                <span>@麦肯齐尼科-非常酷：）尼克拉斯，你有一个新的直接信息。</span>
                                                            </a>
                                                            <div class="iq-email-date">上午08:00</div>
                                                        </div>
                                                        <ul class="iq-social-media">
                                                            <li><a href="#"><i class="ri-delete-bin-2-line"></i></a>
                                                            </li>
                                                            <li><a href="#"><i class="ri-mail-line"></i></a></li>
                                                            <li><a href="#"><i class="ri-file-list-2-line"></i></a></li>
                                                            <li><a href="#"><i class="ri-time-line"></i></a></li>
                                                        </ul>
                                                    </div>
                                                </li>
                                                <div class="email-app-details">
                                                    <div class="iq-card">
                                                        <div class="iq-card-body p-0">
                                                            <div class="">
                                                                <div class="iq-email-to-list p-3">
                                                                    <div class="d-flex justify-content-between">
                                                                        <ul>
                                                                            <li class="mr-3">
                                                                                <a href="javascript: void(0);">
                                                                                    <h4 class="m-0"><i
                                                                                            class="ri-arrow-left-line"></i>
                                                                                    </h4>
                                                                                </a>
                                                                            </li>
                                                                            <li data-toggle="tooltip"
                                                                                data-placement="top" title="邮件"><a
                                                                                    href="#"><i
                                                                                    class="ri-mail-open-line"></i></a>
                                                                            </li>
                                                                            <li data-toggle="tooltip"
                                                                                data-placement="top" title="信息"><a
                                                                                    href="#"><i
                                                                                    class="ri-information-line"></i></a>
                                                                            </li>
                                                                            <li data-toggle="tooltip"
                                                                                data-placement="top" title="删除"><a
                                                                                    href="#"><i
                                                                                    class="ri-delete-bin-line"></i></a>
                                                                            </li>
                                                                            <li data-toggle="tooltip"
                                                                                data-placement="top" title="未读"><a
                                                                                    href="#"><i
                                                                                    class="ri-mail-unread-line"></i></a>
                                                                            </li>
                                                                            <li data-toggle="tooltip"
                                                                                data-placement="top" title="移动"><a
                                                                                    href="#"><i
                                                                                    class="ri-folder-transfer-line"></i></a>
                                                                            </li>
                                                                            <li data-toggle="tooltip"
                                                                                data-placement="top" title="书签"><a
                                                                                    href="#"><i
                                                                                    class="ri-bookmark-line"></i></a>
                                                                            </li>
                                                                        </ul>
                                                                        <div class="iq-email-search d-flex">
                                                                            <ul>
                                                                                <li class="mr-3">
                                                                                    <a class="font-size-14" href="#">第1页，共505页</a>
                                                                                </li>
                                                                                <li data-toggle="tooltip"
                                                                                    data-placement="top"
                                                                                    title="上一页"><a href="#"><i
                                                                                        class="ri-arrow-left-s-line"></i></a>
                                                                                </li>
                                                                                <li data-toggle="tooltip"
                                                                                    data-placement="top" title="下一页"><a
                                                                                        href="#"><i
                                                                                        class="ri-arrow-right-s-line"></i></a>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <hr class="mt-0">
                                                                <div class="iq-inbox-subject p-3">
                                                                    <h5 class="mt-0">您的精英作者图案
                                                                        优化奖励准备就绪！</h5>
                                                                    <div class="iq-inbox-subject-info">
                                                                        <div class="iq-subject-info">
                                                                            <img src="../src/images/user/01.jpg"
                                                                                 class="img-fluid rounded-circle"
                                                                                 alt="#">
                                                                            <div class="iq-subject-status align-self-center">
                                                                                <h6 class="mb-0">公制团队
                                                                                    <a href="dummy@Metorik.com">
                                                                                        <dummy @Metorik.com></dummy>
                                                                                    </a>
                                                                                </h6>
                                                                                <div class="dropdown">
                                                                                    <a class="dropdown-toggle" href="#"
                                                                                       id="dropdownMenuButton3"
                                                                                       data-toggle="dropdown"
                                                                                       aria-haspopup="true"
                                                                                       aria-expanded="false">
                                                                                        对我来说
                                                                                    </a>
                                                                                    <div class="dropdown-menu font-size-12"
                                                                                         aria-labelledby="dropdownMenuButton3">
                                                                                        <table class="iq-inbox-details">
                                                                                            <tbody>
                                                                                            <tr>
                                                                                                <td>从:</td>
                                                                                                <td>中日
                                                                                                    摘要
                                                                                                </td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td>答复:</td>
                                                                                                <td>
                                                                                                    <a href="/cdn-cgi/l/email-protection"
                                                                                                       class="__cf_email__"
                                                                                                       data-cfemail="254b4a574055495c654248444c490b464a48">[email&#160;protected]</a>
                                                                                                </td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td>到:</td>
                                                                                                <td>
                                                                                                    <a href="/cdn-cgi/l/email-protection"
                                                                                                       class="__cf_email__"
                                                                                                       data-cfemail="3158405e5f585255544258565f4271565c50585d1f525e5c">[email&#160;protected]</a>
                                                                                                </td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td>日期:</td>
                                                                                                <td>2019年12月13日08:30
                                                                                                </td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td>主题:</td>
                                                                                                <td>黄金法则</td>
                                                                                            </tr>
                                                                                            <tr>
                                                                                                <td>安全:</td>
                                                                                                <td>标准
                                                                                                    加密
                                                                                                </td>
                                                                                            </tr>
                                                                                            </tbody>
                                                                                        </table>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                            <span class="float-right align-self-center">2029年1月15日上午10:20</span>
                                                                        </div>
                                                                        <div class="iq-inbox-body mt-5">
                                                                            <p>嗨，熊俊波，</p>
                                                                            <p>一个长期存在的事实是

                                                                                读者会被

                                                                                查找时页面的可读内容

                                                                                在它的布局。使用Lorem的意义

                                                                                Ipsum是它或多或少有一个

                                                                                字母的正态分布，如

                                                                                反对在这里使用“内容”

                                                                                这里，让它看起来像是可读的

                                                                                英语。许多桌面出版

                                                                                包和网页编辑器现在使用

                                                                                作为他们的默认模型文本，

                                                                                搜索“lorem ipsum”将会

                                                                                发现许多网站仍在

                                                                                婴儿期。</p>
                                                                            <p>不同的版本在

                                                                                几年，有时偶然，有时

                                                                                故意（注入幽默和

                                                                                喜欢）。</p>
                                                                            <p class="mt-5 mb-0">当做，<span
                                                                                    class="d-inline-block w-100">约翰·迪奥</span>
                                                                            </p>
                                                                        </div>
                                                                        <hr>
                                                                        <div class="attegement">
                                                                            <h6 class="mb-2">附件:</h6>
                                                                            <ul>
                                                                                <li class="icon icon-attegment">
                                                                                    <i class="fa fa-file-text-o"
                                                                                       aria-hidden="true"></i> <span
                                                                                        class="ml-1">mydoc.doc</span>
                                                                                </li>
                                                                                <li class="icon icon-attegment">
                                                                                    <i class="fa fa-file-text-o"
                                                                                       aria-hidden="true"></i> <span
                                                                                        class="ml-1">mydoc.pdf</span>
                                                                                </li>
                                                                            </ul>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="compose-email-popup" style="margin-right: 34%;margin-bottom: 10%;"
                     class="compose-popup modal modal-sticky-bottom-right modal-sticky-lg">
                    <div class="iq-card iq-border-radius-20 mb-0">
                        <div class="iq-card-body">
                            <div class="row align-items-center">
                                <div class="col-md-12 mb-3">
                                    <h5 class="text-primary float-left"><i class="ri-pencil-fill"></i> 编写邮件
                                    </h5>
                                    <button type="submit" class="float-right close-popup" data-dismiss="modal"><i
                                            class="ri-close-fill"></i></button>
                                </div>
                            </div>
                            <form class="email-form">
                                <div class="form-group row">
                                    <label for="inputEmail3" class="col-sm-2 col-form-label">从:</label>
                                    <div class="col-sm-10">
                                        <select id="inputEmail3" class="select2jsMultiSelect form-control"
                                                multiple="multiple">
                                            <option value="Petey Cruiser">Petey Cruiser</option>
                                            <option value="Bob Frapples">Bob Frapples</option>
                                            <option value="Barb Ackue">Barb Ackue</option>
                                            <option value="Greta Life">Greta Life</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="cc" class="col-sm-2 col-form-label">副本:</label>
                                    <div class="col-sm-10">
                                        <select id="cc" class="select2jsMultiSelect form-control" multiple="multiple">
                                            <option value="Brock Lee">Brock Lee</option>
                                            <option value="Rick O'Shea">Rick O'Shea</option>
                                            <option value="Cliff Hanger">Cliff Hanger</option>
                                            <option value="Barb Dwyer">Barb Dwyer</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="subject" class="col-sm-2 col-form-label">主题:</label>
                                    <div class="col-sm-10">
                                        <input type="text" id="subject" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="subject" class="col-sm-2 col-form-label">你的留言:</label>
                                    <div class="col-md-10">
                                        <textarea class="textarea form-control" rows="5"></textarea>
                                    </div>
                                </div>
                                <div class="form-group row align-items-center compose-bottom pt-3 m-0">
                                    <div class="d-flex flex-grow-1 align-items-center">
                                        <div class="send-btn">
                                            <button type="submit" class="btn btn-primary">发送</button>
                                        </div>
                                        <div class="send-panel">
                                            <label class="ml-2 mb-0 iq-bg-primary rounded" for="file"> <input
                                                    type="file" id="file" style="display: none"> <a><i
                                                    class="ri-attachment-line"></i> </a> </label>
                                            <label class="ml-2 mb-0 iq-bg-primary rounded"> <a
                                                    href="javascript:void(0);"> <i
                                                    class="ri-map-pin-user-line text-primary"></i></a> </label>
                                            <label class="ml-2 mb-0 iq-bg-primary rounded"> <a
                                                    href="javascript:void(0);"> <i
                                                    class="ri-drive-line text-primary"></i></a> </label>
                                            <label class="ml-2 mb-0 iq-bg-primary rounded"> <a
                                                    href="javascript:void(0);"> <i
                                                    class="ri-camera-line text-primary"></i></a> </label>
                                            <label class="ml-2 mb-0 iq-bg-primary rounded"> <a
                                                    href="javascript:void(0);"> <i
                                                    class="ri-user-smile-line text-primary"></i></a> </label>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="send-panel float-right">
                                            <label class="ml-2 mb-0 iq-bg-primary rounded"><a
                                                    href="javascript:void(0);"><i
                                                    class="ri-settings-2-line text-primary"></i></a></label>
                                            <label class="ml-2 mb-0 iq-bg-primary rounded"><a
                                                    href="javascript:void(0);">
                                                <i class="ri-delete-bin-line text-primary"></i></a> </label>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Wrapper END -->
    <div id="bottom"></div>
</div>
</body><!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="../src/js/jquery.min.js"></script>
<script src="../src/js/popper.min.js"></script>
<script src="../src/js/bootstrap.min.js"></script>
<!-- Appear JavaScript -->
<script src="../src/js/jquery.appear.js"></script>
<!-- Countdown JavaScript -->
<script src="../src/js/countdown.min.js"></script>
<!-- Counterup JavaScript -->
<script src="../src/js/waypoints.min.js"></script>
<script src="../src/js/jquery.counterup.min.js"></script>
<!-- Wow JavaScript -->
<script src="../src/js/wow.min.js"></script>
<!-- Apexcharts JavaScript -->
<script src="../src/js/apexcharts.js"></script>
<!-- Select2 JavaScript -->
<script src="../src/js/select2.min.js"></script>
<!-- Owl Carousel JavaScript -->
<script src="../src/js/owl.carousel.min.js"></script>
<!-- Magnific Popup JavaScript -->
<script src="../src/js/jquery.magnific-popup.min.js"></script>
<!-- Smooth S../crollbar JavaScript -->
<script src="../src/js/smooth-scrollbar.js"></script>
<!-- lottie JavaScript -->
<script src="../src/js/lottie.js"></script>
<!-- Chart Custom JavaScript -->
<script src="../src/js/chart-custom.js"></script>
<!-- Custom JavaScript -->
<script src="../src/js/custom.js"></script>
<script>
    $(function () {
        $("#menu").load("menus.html");
        $("#navigation").load("navigation-bar.html");
        $("#bottom").load("bottom-bar.html");
    });
</script>
</html>